<!DOCTYPE html>
<!-- 文档类型声明：指定为HTML5标准，定义页面语法规则 -->
<html lang="zh-CN">
<head>
    <!-- 字符编码设置：UTF-8，支持中文及全球大部分字符，避免乱码 -->
    <meta charset="UTF-8">
    <!-- 响应式配置：适配移动设备，视口宽度等于设备宽度，初始缩放比例1.0，禁止用户缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 页面标题：显示在浏览器标签栏，明确当前页面为“TestNexus - 用例管理” -->
    <title>TestNexus - 用例管理</title>
    <!-- 引入外部资源：Font Awesome图标库，提供页面所需的所有图标（如按钮、状态图标） -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 引入外部资源：Google字体，Roboto用于常规文本（提升可读性），Source Code Pro用于代码相关文本 -->
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Source+Code+Pro:wght@400;500;600&display=swap" rel="stylesheet">
    <!-- 引入内部样式表：自定义页面样式，控制布局、颜色、字体等视觉效果 -->
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
    <!-- 技术风格背景图案：纯装饰元素，提升页面科技感，无实际功能 -->
    <div class="tech-pattern"></div>
    <!-- 网格覆盖层：纯装饰元素，增强页面层次感，无实际功能 -->
    <div class="grid-overlay"></div>

    <!-- 应用主容器：包裹页面所有核心内容，用于整体布局控制（侧边栏+主内容区） -->
    <div class="app-container">
        <!-- 侧边导航：语义化标签<aside>，定义页面辅助导航区域，支持移动端适配 -->
        <aside class="sidebar" id="sidebar">
            <!-- 侧边栏头部：包含平台Logo，增强品牌识别 -->
            <header class="sidebar-header">
                <div class="logo">
                    <i class="fas fa-microchip"></i> <!-- 芯片图标：体现测试平台的技术属性 -->
                    <span class="logo-text">TestNexus</span> <!-- 平台名称 -->
                </div>
            </header>

            <!-- 侧边栏菜单：语义化标签<nav>，定义导航菜单，按功能模块分组 -->
            <nav class="sidebar-menu">
                <!-- 第一组菜单：核心功能（测试平台核心操作入口） -->
                <div class="menu-section">
                    <div class="section-title">核心功能</div> <!-- 菜单组标题，区分功能分类 -->
                    <div class="menu-item">
                        <a href="index.html" style="color: inherit; text-decoration: none;">
                        <i class="fas fa-index"></i>
                        <span>仪表盘</span>
                        </a>
                   </div>
                    <div class="menu-item active"> <!-- 当前页面，保留active -->
                       <a href="use_case_management.html" style="color: inherit; text-decoration: none;">
                       <i class="fas fa-sitemap"></i>
                       <span>用例管理</span>
                       </a>
                    </div>
                    <div class="menu-item"> <!-- 菜单项：脚本管理（未激活） -->
                        <i class="fas fa-code"></i> <!-- 代码图标：对应脚本属性 -->
                        <span>脚本管理</span>
                    </div>
                    <div class="menu-item"> <!-- 菜单项：执行引擎（未激活） -->
                        <i class="fas fa-play-circle"></i> <!-- 播放图标：对应“执行测试”操作 -->
                        <span>执行引擎</span>
                    </div>
                </div>

                <!-- 第二组菜单：支持功能（辅助测试的功能模块） -->
                <div class="menu-section">
                    <div class="section-title">支持功能</div>
                    <div class="menu-item"> <!-- 菜单项：环境管理 -->
                        <i class="fas fa-server"></i> <!-- 服务器图标：对应环境属性 -->
                        <span>环境管理</span>
                    </div>
                    <div class="menu-item"> <!-- 菜单项：数据管理 -->
                        <i class="fas fa-database"></i> <!-- 数据库图标：对应数据属性 -->
                        <span>数据管理</span>
                    </div>
                    <div class="menu-item"> <!-- 菜单项：报告分析 -->
                        <i class="fas fa-chart-network"></i> <!-- 图表图标：对应分析属性 -->
                        <span>报告分析</span>
                    </div>
                </div>

                <!-- 第三组菜单：系统设置（平台配置相关） -->
                <div class="menu-section">
                    <div class="section-title">系统设置</div>
                    <div class="menu-item"> <!-- 菜单项：用户与权限 -->
                        <i class="fas fa-users-cog"></i> <!-- 用户设置图标：对应权限管理 -->
                        <span>用户与权限</span>
                    </div>
                    <div class="menu-item"> <!-- 菜单项：系统设置 -->
                        <i class="fas fa-cogs"></i> <!-- 齿轮图标：对应系统配置 -->
                        <span>系统设置</span>
                    </div>
                    <div class="menu-item"> <!-- 菜单项：帮助中心 -->
                        <i class="fas fa-life-ring"></i> <!-- 救生圈图标：对应帮助属性 -->
                        <span>帮助中心</span>
                    </div>
                </div>
            </nav>

            <!-- 侧边栏底部：当前登录用户信息，语义化标签<footer> -->
            <footer class="sidebar-footer">
                <div class="user-avatar">TE</div> <!-- 用户头像：显示用户名首字母（Test Engineer） -->
                <div class="user-info"> <!-- 用户信息详情 -->
                    <div class="user-name">测试工程师</div> <!-- 用户名 -->
                    <div class="user-role">管理员</div> <!-- 用户角色：标识权限等级 -->
                </div>
                <div class="action-btn"> <!-- 用户设置按钮：打开个人配置 -->
                    <i class="fas fa-cog"></i> <!-- 齿轮图标：对应设置操作 -->
                </div>
            </footer>
        </aside>

        <!-- 主内容区域：语义化标签<main>，定义页面核心内容区 -->
        <main class="main-content">
            <!-- 顶部导航：语义化标签<header>，包含面包屑、搜索、通知等快捷操作 -->
            <header class="topbar">
                <!-- 移动端侧边栏触发按钮：仅在移动端显示，点击展开/收起侧边栏 -->
                <button class="toggle-sidebar" id="toggle-sidebar">
                    <i class="fas fa-bars"></i> <!-- 汉堡菜单图标：移动端常见导航触发标识 -->
                </button>
                <!-- 面包屑导航：显示当前页面在平台中的层级路径，帮助用户定位 -->
                <div class="breadcrumb">
                    <a href="index.html">仪表盘</a> <!-- 点击此处跳回仪表盘 -->
                    <span>/</span>
                    <span>用例管理</span>
                </div>
                <!-- 顶部操作区：搜索、通知、快捷按钮 -->
                <div class="topbar-actions">
                    <!-- 搜索栏：搜索平台内的用例（按名称、ID、模块等） -->
                    <div class="search-bar">
                        <i class="fas fa-search"></i> <!-- 搜索图标 -->
                        <input type="text" placeholder="搜索用例名称、ID、模块..."> <!-- 搜索输入框，提示搜索范围 -->
                    </div>
                    <!-- 通知图标：显示未读通知数量 -->
                    <div class="notification">
                        <i class="fas fa-bell"></i> <!-- 铃铛图标：对应通知属性 -->
                        <div class="badge">5</div> <!-- 未读数量标记：5条未读通知 -->
                    </div>
                    <!-- 快捷操作按钮组：高频操作入口 -->
                    <div class="quick-actions">
                        <div class="action-btn" title="刷新"> <!-- 刷新按钮：刷新当前页面数据 -->
                            <i class="fas fa-sync-alt"></i> <!-- 刷新图标 -->
                        </div>
                        <div class="action-btn" title="更多操作"> <!-- 更多操作：展开其他功能入口 -->
                            <i class="fas fa-ellipsis-v"></i> <!-- 垂直省略号：表示“更多选项”，避免与“新建”歧义 -->
                        </div>
                    </div>
                </div>
            </header>

            <!-- 内容区域：包裹页面所有核心业务内容 -->
            <div class="content-wrapper">
                <!-- 页面标题和操作：语义化标签<section>，定义页面头部区域 -->
                <section class="page-header">
                    <h1 class="page-title">用例管理</h1> <!-- 页面主标题，明确当前功能 -->
                    <!-- 页面操作按钮组：导入/导出用例、新建用例 -->
                    <div class="page-actions">
                        <div class="import-export"> <!-- 导入/导出操作组 -->
                            <!-- 导入用例：隐藏原生文件输入框，自定义按钮样式 -->
                            <label class="import-btn">
                                <i class="fas fa-upload"></i> 导入用例 <!-- 上传图标：对应“导入”操作 -->
                                <input type="file" accept=".xlsx,.csv,.json"> <!-- 限制导入文件格式：Excel、CSV、JSON -->
                            </label>
                            <!-- 导出用例：轮廓按钮（次要操作） -->
                            <button class="btn btn-outline">
                                <i class="fas fa-download"></i> 导出用例 <!-- 下载图标：对应“导出”操作 -->
                            </button>
                        </div>
                        <!-- 新建用例：实心按钮（主要操作，优先级最高），带唯一ID用于JS绑定事件 -->
                        <button class="btn btn-primary" id="create-case-btn">
                            <i class="fas fa-plus"></i> 新建用例 <!-- 加号图标：对应“新建”操作 -->
                        </button>
                    </div>
                </section>

                <!-- 用例统计卡片：语义化标签<section>，展示用例核心数据指标（4列布局） -->
                <section class="grid-container">
                    <!-- 统计卡片1：总测试用例数 -->
                    <div class="case-stat-card">
                        <div class="case-stat-icon">
                            <i class="fas fa-file-alt"></i> <!-- 文件图标：对应“用例”属性 -->
                        </div>
                        <div class="case-stat-info">
                            <div class="case-stat-value">1,248</div> <!-- 具体数值：1248条总用例 -->
                            <div class="case-stat-label">总测试用例数</div> <!-- 指标名称 -->
                            <div class="case-stat-trend"> <!-- 趋势提示：较上月增长12% -->
                                <i class="fas fa-arrow-up"></i> 12% 较上月 <!-- 上升箭头：表示增长 -->
                            </div>
                        </div>
                    </div>

                    <!-- 统计卡片2：已执行用例数 -->
                    <div class="case-stat-card">
                        <div class="case-stat-icon">
                            <i class="fas fa-check-circle"></i> <!-- 勾选图标：对应“已完成”状态 -->
                        </div>
                        <div class="case-stat-info">
                            <div class="case-stat-value">986</div> <!-- 具体数值：986条已执行用例 -->
                            <div class="case-stat-label">已执行用例</div> <!-- 指标名称 -->
                            <div class="case-stat-trend">
                                <i class="fas fa-arrow-up"></i> 8% 较上月 <!-- 上升箭头：表示增长 -->
                            </div>
                        </div>
                    </div>

                    <!-- 统计卡片3：阻塞用例数 -->
                    <div class="case-stat-card">
                        <div class="case-stat-icon">
                            <i class="fas fa-exclamation-triangle"></i> <!-- 警告三角图标：对应“阻塞”状态 -->
                        </div>
                        <div class="case-stat-info">
                            <div class="case-stat-value">42</div> <!-- 具体数值：42条阻塞用例 -->
                            <div class="case-stat-label">阻塞用例</div> <!-- 指标名称 -->
                            <div class="case-stat-trend">
                                <i class="fas fa-arrow-down"></i> 5% 较上月 <!-- 下降箭头：表示减少（正向趋势） -->
                            </div>
                        </div>
                    </div>

                    <!-- 统计卡片4：待执行用例数 -->
                    <div class="case-stat-card">
                        <div class="case-stat-icon">
                            <i class="fas fa-clock"></i> <!-- 时钟图标：对应“待执行”状态 -->
                        </div>
                        <div class="case-stat-info">
                            <div class="case-stat-value">220</div> <!-- 具体数值：220条待执行用例 -->
                            <div class="case-stat-label">待执行用例</div> <!-- 指标名称 -->
                            <div class="case-stat-trend">
                                <i class="fas fa-arrow-up"></i> 3% 较上月 <!-- 上升箭头：表示增长 -->
                            </div>
                        </div>
                    </div>
                </section>

                <!-- 用例筛选栏：语义化标签<section>，提供多维度筛选用例的功能 -->
                <section class="case-filter">
                    <!-- 筛选组1：按模块筛选 -->
                    <div class="filter-group">
                        <span class="filter-label">模块:</span> <!-- 筛选标签：明确筛选维度 -->
                        <select class="filter-select"> <!-- 下拉选择框：选项为平台内的测试模块 -->
                            <option value="">全部模块</option> <!-- 默认选项：显示所有模块 -->
                            <option value="user">用户管理模块</option>
                            <option value="order">订单管理模块</option>
                            <option value="payment">支付模块</option>
                            <option value="product">商品模块</option>
                        </select>
                    </div>

                    <!-- 筛选组2：按优先级筛选 -->
                    <div class="filter-group">
                        <span class="filter-label">优先级:</span>
                        <select class="filter-select"> <!-- 选项为用例优先级（从高到低） -->
                            <option value="">全部优先级</option>
                            <option value="p0">P0 (最高)</option> <!-- P0：核心用例，最高优先级 -->
                            <option value="p1">P1 (高)</option>
                            <option value="p2">P2 (中)</option>
                            <option value="p3">P3 (低)</option>
                        </select>
                    </div>

                    <!-- 筛选组3：按状态筛选 -->
                    <div class="filter-group">
                        <span class="filter-label">状态:</span>
                        <select class="filter-select"> <!-- 选项为用例状态 -->
                            <option value="">全部状态</option>
                            <option value="draft">草稿</option> <!-- 草稿：未完成编写 -->
                            <option value="ready">就绪</option> <!-- 就绪：待执行 -->
                            <option value="executed">已执行</option> <!-- 已执行：完成测试 -->
                            <option value="blocked">阻塞</option> <!-- 阻塞：因依赖问题无法执行 -->
                        </select>
                    </div>

                    <!-- 筛选组4：按类型筛选 -->
                    <div class="filter-group">
                        <span class="filter-label">类型:</span>
                        <select class="filter-select"> <!-- 选项为测试类型 -->
                            <option value="">全部类型</option>
                            <option value="functional">功能测试</option> <!-- 功能测试：验证功能正确性 -->
                            <option value="performance">性能测试</option> <!-- 性能测试：验证系统性能 -->
                            <option value="security">安全测试</option> <!-- 安全测试：验证系统安全性 -->
                            <option value="compatibility">兼容性测试</option> <!-- 兼容性测试：验证多环境适配 -->
                        </select>
                    </div>

                    <!-- 筛选操作按钮组：高级筛选和重置 -->
                    <div class="filter-actions">
                        <!-- 高级筛选：打开更多筛选条件（如创建时间、创建人） -->
                        <button class="btn btn-outline">
                            <i class="fas fa-filter"></i> 高级筛选
                        </button>
                        <!-- 重置筛选：清空所有筛选条件，恢复默认状态 -->
                        <button class="btn btn-outline">
                            <i class="fas fa-redo"></i> 重置
                        </button>
                    </div>
                </section>


                <!-- 用例列表卡片：语义化标签<section>，表格形式展示用例详情 -->
                <section class="card">
                    <div class="card">
                        <div class="card-header">
                                <div class="card-title">脚本管理</div> <!-- 卡片标题 -->
                                <!-- 脚本操作按钮组 -->
                                <div>
                                    <!-- 次要按钮：上传脚本 -->
                                    <button class="btn btn-outline btn-sm">
                                        <i class="fas fa-upload"></i> 上传脚本
                                    </button>
                                    <!-- 主要按钮：同步仓库（如Git仓库） -->
                                    <button class="btn btn-primary btn-sm">
                                        <i class="fab fa-git-alt"></i> 同步仓库
                                    </button>
                                </div>
                            </div>
                            <div class="card-body">
                                <!-- 标签页：按脚本类型分类筛选 -->
                                <div class="tabs">
                                    <div class="tab active">所有脚本</div> <!-- 当前激活：显示所有脚本 -->
                                    <div class="tab">Web自动化</div> <!-- 筛选：Web自动化脚本 -->
                                    <div class="tab">API测试</div> <!-- 筛选：API测试脚本 -->
                                    <div class="tab">移动端测试</div> <!-- 筛选：移动端测试脚本 -->
                                </div>

                                <!-- 表格容器：带滚动条（防止内容溢出） -->
                                <div class="table-responsive">
                                    <table class="table">
                                        <!-- 表格表头：定义列含义 -->
                                        <thead>
                                            <tr>
                                                <th>脚本名称</th> <!-- 脚本文件名 -->
                                                <th>类型</th> <!-- 脚本所属类型 -->
                                                <th>最后修改</th> <!-- 脚本最后更新时间 -->
                                                <th>状态</th> <!-- 脚本验证状态 -->
                                                <th>操作</th> <!-- 可执行的操作 -->
                                            </tr>
                                        </thead>
                                        <!-- 表格内容：具体脚本数据 -->
                                        <tbody>
                                            <!-- 脚本1：login_test.py -->
                                            <tr>
                                                <td>login_test.py</td> <!-- 脚本名 -->
                                                <td>Web自动化</td> <!-- 类型 -->
                                                <td>2023-10-15</td> <!-- 最后修改时间 -->
                                                <td><span class="status-badge status-success">已验证</span></td> <!-- 状态：成功（绿色） -->
                                                <td>
                                                    <!-- 操作按钮1：执行脚本 -->
                                                    <button class="btn btn-outline btn-sm">
                                                        <i class="fas fa-play"></i>
                                                    </button>
                                                    <!-- 操作按钮2：编辑脚本 -->
                                                    <button class="btn btn-outline btn-sm">
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                    <!-- 操作按钮3：删除脚本（带唯一ID，用于JS绑定事件） -->
                                                    <button class="btn btn-outline btn-sm " id="SCRIPT-62B4ADC1">
                                                        <i class="fas fa-trash-alt"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                            <!-- 脚本2：payment_api_test.js -->
                                            <tr>
                                                <td>payment_api_test.js</td>
                                                <td>API测试</td>
                                                <td>2023-10-14</td>
                                                <td><span class="status-badge status-success">已验证</span></td>
                                                <td>
                                                    <button class="btn btn-outline btn-sm">
                                                        <i class="fas fa-play"></i>
                                                    </button>
                                                    <button class="btn btn-outline btn-sm">
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                            <!-- 脚本3：mobile_login_test.java -->
                                            <tr>
                                                <td>mobile_login_test.java</td>
                                                <td>移动端测试</td>
                                                <td>2023-10-12</td>
                                                <td><span class="status-badge status-warning">需更新</span></td> <!-- 状态：警告（黄色） -->
                                                <td>
                                                    <button class="btn btn-outline btn-sm">
                                                        <i class="fas fa-play"></i>
                                                    </button>
                                                    <button class="btn btn-outline btn-sm">
                                                        <i class="fas fa-edit"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    <!-- 分页控件：语义化类名，控制用例列表分页显示 -->
                        <div class="pagination">
                            <!-- 分页信息：显示当前页码范围和总条数 -->
                            <div class="pagination-info">
                                显示 1-5 条，共 100 条 <!-- 提示用户当前位置和数据总量 -->
                            </div>
                            <!-- 分页控制按钮：上一页、页码、下一页 -->
                            <div class="pagination-controls">
                                <button class="btn btn-outline btn-sm" disabled title="上一页"> <!-- 上一页：禁用（当前在第1页） -->
                                    <i class="fas fa-chevron-left"></i> <!-- 左箭头图标 -->
                                </button>
                                <button class="btn btn-primary btn-sm">1</button> <!-- 当前页码：第1页（激活状态） -->
                                <button class="btn btn-outline btn-sm">2</button> <!-- 页码2 -->
                                <button class="btn btn-outline btn-sm">3</button> <!-- 页码3 -->
                                <button class="btn btn-outline btn-sm">4</button> <!-- 页码4 -->
                                <button class="btn btn-outline btn-sm">5</button> <!-- 页码5 -->
                                <button class="btn btn-outline btn-sm" title="下一页"> <!-- 下一页：可用（有更多页码） -->
                                    <i class="fas fa-chevron-right"></i> <!-- 右箭头图标 -->
                                </button>
                            </div>
                        </div>
                </section>
            </div>
        </main>
    </div>

    <!-- 新建用例弹窗：半透明背景+弹窗，用于创建新用例，优化层级与动画 -->
    <div class="modal-backdrop" id="create-case-modal">
        <!-- 弹窗主体：居中显示，包含表单 -->
        <div class="modal">
            <!-- 弹窗头部：标题和关闭按钮 -->
            <header class="modal-header">
                <h2 class="modal-title">新建测试用例</h2> <!-- 弹窗标题 -->
                <button class="modal-close" id="close-modal" title="关闭"> <!-- 关闭按钮：关闭弹窗 -->
                    <i class="fas fa-times"></i> <!-- 叉号图标：表示“关闭” -->
                </button>
            </header>
            <!-- 弹窗内容：新建用例表单 -->
            <div class="modal-body">
                <form id="create-case-form"> <!-- 表单：提交新建用例数据，带唯一ID用于JS处理 -->
                    <!-- 表单分组：基础信息（网格布局，2列） -->
                    <fieldset class="form-grid">
                        <!-- 表单组1：用例名称（必填） -->
                        <div class="form-group">
                            <label for="case-name" class="form-label">用例名称 <span style="color: var(--danger);">*</span></label> <!-- 标签：带必填标记（红色*） -->
                            <input type="text" id="case-name" class="form-control" placeholder="输入用例名称（如：用户登录功能测试）" required> <!-- 输入框：必填，提示示例 -->
                        </div>
                        <!-- 表单组2：用例ID（系统生成） -->
                        <div class="form-group">
                            <label for="case-id" class="form-label">用例ID</label> <!-- 标签 -->
                            <input type="text" id="case-id" class="form-control" placeholder="系统自动生成" readonly> <!-- 输入框：只读，系统自动生成ID -->
                        </div>
                        <!-- 表单组3：所属模块（必填） -->
                        <div class="form-group">
                            <label for="case-module" class="form-label">所属模块 <span style="color: var(--danger);">*</span></label> <!-- 标签：带必填标记 -->
                            <select id="case-module" class="form-control" required> <!-- 下拉框：必填，选择用例所属模块 -->
                                <option value="">选择模块</option> <!-- 默认选项：提示用户选择 -->
                                <option value="user">用户管理模块</option>
                                <option value="order">订单管理模块</option>
                                <option value="payment">支付模块</option>
                                <option value="product">商品模块</option>
                            </select>
                        </div>
                        <!-- 表单组4：用例类型（必填） -->
                        <div class="form-group">
                            <label for="case-type" class="form-label">用例类型 <span style="color: var(--danger);">*</span></label> <!-- 标签：带必填标记 -->
                            <select id="case-type" class="form-control" required> <!-- 下拉框：必填，选择测试类型 -->
                                <option value="">选择类型</option> <!-- 默认选项：提示用户选择 -->
                                <option value="functional">功能测试</option>
                                <option value="performance">性能测试</option>
                                <option value="security">安全测试</option>
                                <option value="compatibility">兼容性测试</option>
                            </select>
                        </div>
<!-- 注：原代码此处未闭合，实际项目中需补充表单剩余部分（如优先级、前置条件、测试步骤等）及弹窗底部的“提交/取消”按钮 -->
<script src="/static/main.js"></script>
</body>
</html>